<template>
	<div>
		<ul>
			<li v-for="(item,index) in citiess" 
			:key="item.id" 
			@click="scrollTo" 
			@touchmove="touchaz" 
			@touchazstart="touchazstart"
			@touchazend="touchazend"
			@touchmove.prevent="touchaz"     
			>{{index}}</li>
		</ul>
			<!-- 阻止默认事件 @touchmove.prevent="touchaz"     -->

	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	export default {
		data() {
			return {
				azstr: "",
				stat: true
			}
		},
		props: ["citiess"],
		// methods也指向实例,事件方法写在此处
		methods: {
			scrollTo(e) {
				// 将azstr利用City.vue传送到Citydetails,监听scrollTo点击,实现页面滚动
				this.azstr = e.target.innerText
				this.$emit("azchange", this.azstr)
				// ref 获取节点对应的内容[]中为数组，
				// obj.age和obj["age"]获取的两种方法
				// console.log(this.$refs[azstr])
				// 点击滚动 this指向实例同指一个 滚动到对应节点位置
				// this.scroll.scrollToElement(this.$refs[azstr])
			},
			// event 事件对象
			touchaz(e) {
				if (this.stat) {
					let cy = e.touches[0].clientY
					let num = parseInt((cy-160)/20)
					// console.log(this.azarr[num])
					if (num<this.azarr.length&&cy>165) {
						this.$emit("azchange", this.azarr[num])
					}
				}
			},
			touchazstart() {
				this.stat = true
			},
			touchazend() {
				this.stat = false
			},
		},
		mounted() {
			this.scroll = new BScroll('.wrapper')
		},
		computed: {
			azarr(){
				let azarr = []
				for (let i in this.citiess) {
					azarr.push(i)
				}
				return azarr
				console.log(citiess)
			}

		}

	}
</script>

<style scoped>
	ul {
		width: .2rem;
		position: fixed;
		top: 1.55rem;
		right: .01rem;
		z-index: 2;
	}

	li {
		color: #0086B3;
		list-style: none;
		text-align: center;
	}
</style>
